{% extends "base.html" %}
  {% block content %}

      <div id="page-wrapper" xmlns="http://www.w3.org/1999/html">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="page-header">Run Saltstack Command</h2>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Run Saltstack Command
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="dataTable_wrapper">
                                     <label><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" style="text-decoration:none">Target</a></label>
                            <form method="post" action="/execute/minions_salt_result/" target="iframepage">     <!-- target iframe refresh minions_shell_result.html -->
                                     <div id="collapseOne" class="panel-collapse collapse on">
                                        <div class="panel-body" style="padding:0px">
                                           <table class="table table-striped table-bordered table-hover">
                                               <tr>
                                                   <td>
                                                       <label>Groups</label>
                                                   </td>
                                                   <td>
                                                       <label>Hosts</label>
                                                   </td>
                                               </tr>
                                                {% load estimate %}
                                               {% for groups,hosts in list_groups.items %}
                                               <tr>
                                                   <td style="white-space: nowrap;">
                                                       <div class="checkbox-inline" style="margin-left:7px">
                                                          <input  id="{{ groups }}"  onclick="selectAll('{{ groups }}')" type="checkbox" value="">{{ groups }}
                                                       </div>
                                                   </td>
                                                   <td>
                                                       {% for host in hosts|sort_ip %}
                                                           <div class="checkbox-inline" name="checkedhost">
                                                               <input class="{{ groups }}" name="hosts_name"  onclick="selectAll()" type="checkbox" value="{{ host }}" >{{ host }}
                                                           </div>
                                                       {% endfor %}
                                                   </td>
                                               </tr>
                                               {% endfor %}
                                           </table>
                                        </div>
                                     </div>
                            </div>
                                <div class="form-group">
                                    <label>Modules Name</label>
                                    <select class="js-example-basic-single" name="salt_fun" style="width: 100%;margin-bottom: 0px">
                                          {% for mod in modindex %}
                                                  <option>{{ mod.module_name }}</option>
                                          {% endfor %}
                                    </select>
                                </div>
                            <div class="form-group">
                                <label>Arguments</label>
                                <textarea class="form-control" rows="1" name="salt_arg" id="salt_arg"></textarea>
                            </div>
                            <div class="form-group">
                                <input type="submit" value="Submit" class="btn btn-outline btn-success btn-xs"/>
                                <input type="reset" value="Reset" class="btn btn-outline btn-danger btn-xs" />
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne1" style="text-decoration:none;float: right"><input type="submit" value="History" class="btn btn-outline btn-info btn-xs" onclick="setHistory()"/></a>
                            </div>
                            </form>
                            <div id="collapseOne1" class="panel-collapse collapse on">
                                        <div class="panel-body" style="padding:0px">
                                           <table class="table table-striped table-bordered table-hover" id="history">

                                           </table>
                                        </div>
                                     </div>
                            <div class="form-group">
                                <label>Command Result</label>
                                <iframe src="/execute/minions_shell_result/"  marginheight="0" marginwidth="0" frameborder="0" scrolling="no" width="100%" height=100% id="iframepage" name="iframepage" onLoad="iFrameHeight()"></iframe>
                            </div>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
      </div>

      <script src="/static/bower_components/jquery/dist/jquery.min.js"></script>
      <script type="text/javascript">
        function selectAll(group){
            var checklist = document.getElementsByClassName(group);
            var checkspan = document.getElementsByTagName('span');
            //alert(checkspan)
            if(document.getElementById(group).checked) {
               for(var i=0;i<checklist.length;i++) {
                     checklist[i].checked = 1;
                  }
            }
            else {
               for(var j=0;j<checklist.length;j++) {
                    checklist[j].checked = 0;
                }
            }
        }
        // iframe
        function iFrameHeight() {
           var ifm= document.getElementById("iframepage");
           var subWeb = document.frames ? document.frames["iframepage"].document :
              ifm.contentDocument;
              if(ifm != null && subWeb != null) {
              ifm.height = subWeb.body.scrollHeight;
              }
        }

        function setHistory(){
            $.ajax({
                type: "get",
                async: false, //同步执行
                url: "/execute/get_history/1",
                data: {},
                dataType: "json", //返回数据形式为json
                success: function (result) {
                    //alert(result.queue_count[2]);
                    //alert(result.cmd_history_list);
                    $("#history").empty()
                    $("#history").append(
                            '<tr><td><label>Command History</label></td><td><label>Date</label></td></tr>'
                        );
                    for (var i = 0; i < result.cmd_history_list.length; i++) {
                        //alert(result.cmd_history_list[i].execute_time)
                        $("#history").append(
                            '<tr><td style="white-space: nowrap;"><div class="checkbox-inline" style="margin-left:7px">' + result.cmd_history_list[i].command + '</div></td><td style="width: 180px"><div class="checkbox-inline" style="margin-left:7px">' + result.cmd_history_list[i].execute_time + '</div></td></tr>'
                        );
                    }
                }
            })
        }

        $(document).ready(function() {
            $(".js-example-basic-single").select2();
        });

    </script>

  {% endblock %}
